<template>
    <!-- <div>
        商品分类
    </div> -->
    <panel title="商品分类">
        <el-button slot="btn" @click="dialogFormVisible = true">添加分类</el-button>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号">

            </el-table-column>
            <el-table-column prop="cateName" label="分类名">
                <template slot-scope="scope">
                    <span v-if="scope.row.isEdit === false">{{ scope.row.cateName }}</span>
                    <el-input v-else v-model="scope.row.cateName"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="是否启用">

                <template slot-scope="scope">
                    <el-switch v-model="scope.row.state" active-color="#13ce66" :active-value="1" :inactive-value="0"
                        :disabled="!scope.row.isEdit" inactive-color="#ff4949">
                    </el-switch>
                </template>
                <!-- disabled=false -->
            </el-table-column>
            <el-table-column label="操作">

                <template slot-scope="scope">
                    <el-button size="mini" @click="goodaedit(scope.row)"
                        v-if="scope.row.isEdit === false">编辑</el-button>
                    <el-button size="mini" v-else @click="complegooda(scope.row)">完成</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>

            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination :page-sizes="[5, 10, 20, 30]" :page-size="paramsinfo.pageSize"
                :current-page="paramsinfo.currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @current-change="pageChange" @size-change="sizeChange">
            </el-pagination>
        </div>
        <!-- 弹框 -->
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="分类名称" label-width="120px">
                    <el-input v-model="form.cateName"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" label-width="120px">
                    <el-switch active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"
                        v-model="form.state">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </div>
        </el-dialog>
    </panel>
</template>

<script>
import axios from '@/utils/request'
import { goodscatelistReq, goodseditcateReq, goodsaddcateReq } from '@/api/account.api'

export default {
    data() {
        return {
            dialogFormVisible: false,
            // formLabelWidth
            form: {
                cateName: '',
                state: 1,
            },

            paramsinfo: {
                currentPage: 1,
                pageSize: 5,
            },
            tableData: [],
            total: null,

        }
    },
    methods: {
        handleDelete(index, row) {
            this.$confirm('您是否确认删除该类别？', '删除提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消删除',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!',

                });
                axios.get('/goods/delcate', {
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    // this.getData()
                    this.goodscatelist()

                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        pageChange(currentPage) {
            // 改变页码
            this.paramsinfo.currentPage = currentPage
            this.goodscatelist()
        },
        sizeChange(pageSize) {
            // 改变页码
            this.paramsinfo.pageSize = pageSize
            this.goodscatelist()
        },
        goodaedit(row) {
            console.log(row.isEdit, '=========');
            row.isEdit = true

        },
        complegooda(row) {
            row.isEdit = false
            goodseditcateReq(row).then((res) => {
                this.$message.success('修改成功')
            })

        },
        goodscatelist() {
            goodscatelistReq(this.paramsinfo).then((res) => {
                res.data.data.forEach(item => {
                    item.isEdit = false
                })
                this.total = res.data.total
                this.tableData = res.data.data
            })
        },
        determine() {
            goodsaddcateReq(this.form).then((res) => {
                if (res.data.code === 0) {
                    this.goodscatelist()
                }
                this.dialogFormVisible = false
            })
        }

    },

    created() {
        this.goodscatelist()
    }
}
</script>

<style lang="less" scoped>

</style>